require(['./config'], () => {
  require(['template', 'header', 'footer'], (template) => {
    class List {
      constructor () {
        this.list()
        this.rap2Like()
        this.moveTop()
        this.change()
        this.search()
      }
      list(){
        $.get('/libs/json/index.json', resp => {
          if(resp){
            const html = template('main-list-li', {
              list: resp
            })
            $('#main-list').html(html)
          }else{
            $('#main-null').css('display', 'block')
          }
          
        })
      }
      rap2Like(){
        $.get('http://rap2.taobao.org:38080/app/mock/265792/api/home/list', resp => {
          if(resp.code === 200){
            const { list } = resp.body
            $('#like-ul').html(template('rap2-list', { list }))
          }
        })
      }
      moveTop(){
        $(window).scroll(function () {
          if ($(window).scrollTop() >= 50) {
              $('#main-top').fadeIn();
          }
          else {
              $('#main-top').fadeOut();
          }
        })
        $('#main-top').click(function(){
          $('html,body').animate({ scrollTop: 0 }, 500);
        })
      }
      change(){
        const _this = this
        $.each($('#shopList-ul li'),function(){
          if($(this).data('type') == window.location.search.slice(7)){
            $(this).addClass('onclick-li').siblings().removeClass('onclick-li')
            $('.listTitle span').html($(this).html())
            if($(this).data('id') === '部分商品'){
              $.get('/libs/json/index.json', resp => {
                if(resp){
                  const html = template('main-list-li', {
                    list: resp,
                  })
                  $('#main-list').html(html)
                }
              })
            }else{
              var dataId = $(this).data('id')
              $.get('/api/search',
              {
                word: dataId,
                start: 0,
                sort: 0
              },
              resp => {
                if(resp.code === 200){
                  const { list } = resp.data
                  if(list.length === 0){
                    $('#main-null').show()
                    $('#main-list').hide()
                  }else{
                    $('#main-null').hide()
                    $('#main-list').show()
                    $('#main-list').html(template('panda', { list }))
                  }
                }
              })
            }
          }
        })
        

        $('#shopList-ul').on('click', 'li', function(){
            $(this).addClass('onclick-li').siblings().removeClass('onclick-li')
            $('.listTitle span').html($(this).html())
            
            
            if($(this).data('id') === '部分商品'){
              $.get('/libs/json/index.json', resp => {
                if(resp){
                  const html = template('main-list-li', {
                    list: resp,
                  })
                  $('#main-list').html(html)
                }
              })
            }else{
              var dataId = $(this).data('id')
              if($('#sorting-ul input').prop('checked')){
                $.get('/api/search',
                {
                  word: dataId,
                  start: 0,
                  sort: 1
                }, 
                resp => {
                  if(resp.code === 200){
                    const { list } = resp.data
                    if(list.length === 0){
                      $('#main-null').show()
                      $('#main-list').hide()
                    }else{
                      $('#main-null').hide()
                      $('#main-list').show()
                      $('#main-list').html(template('panda', { list }))
                    }
                  }
                })
              }else{
                $.get('/api/search',
                {
                  word: dataId,
                  start: 0,
                  sort: 0
                }, 
                resp => {
                  if(resp.code === 200){
                    const { list } = resp.data
                    if(list.length === 0){
                      $('#main-null').show()
                      $('#main-list').hide()
                    }else{
                      $('#main-null').hide()
                      $('#main-list').show()
                      $('#main-list').html(template('panda', { list }))
                    }
                  }
                  var count = 0
                  _this.more(dataId,count)
                })
              }
            }
        })
      }

      more(dataId,count){
        $('.more').on('click',()=>{
          console.log(count)
          count += 40
          $('.more').remove()
          $.get('/api/search',
          {
            word: dataId,
            start: count,
            sort: 0
          }, 
          resp => {
            if(resp.code === 200){
              const { list } = resp.data
              if(list.length === 0){
                $('#more-text').show()
                setTimeout(function(){
                  $('#more-text').hide()
                },3000)
              }else{
                $('#main-list').append(template('panda', { list }))
              }
            }
            this.more(dataId,count)
          })
        })
      }

      search(){
        var data = decodeURIComponent(window.location.search.slice(1,5))
        if(data == 'word'){
          var searchWord = decodeURIComponent(window.location.search.slice(6))
          $('#shopList-ul .onclick-li').removeClass('onclick-li')
          $('.listTitle span').html(`搜索商品: ${searchWord}`)
          $.get('/api/search',
          {
            word: searchWord,
            start: 0,
            sort: 0
          },
          resp => {
            if(resp.code === 200){
              const { list } = resp.data
              if(list.length === 0){
                $('#main-null').show()
                $('#main-list').hide()
              }else{
                $('#main-null').hide()
                $('#main-list').show()
                $('#main-list').html(template('panda', { list }))
              }
            }
            var count = 0
            this.more(searchWord,count)
          })
        }
      }

    }
    new List()
  })
})
